﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="people.aspx.cs" Inherits="people" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        /* 容器样式 */
         /* 容器样式 */
        .profile-container {
            width: 60%;
            margin: 40px auto;
            padding: 20px;
            background-color: #f4f2f9;
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            text-align: center;
        }

        /* 标题样式 */
        .profile-title {
            font-size: 28px;
            color: #5a3e85;
            font-weight: bold;
            margin-bottom: 20px;
        }

        /* 欢迎标签样式 */
        .welcome-text {
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;
        }

        /* 输入框和按钮容器 */
        .input-group {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }

        /* 信息分组容器样式 */
        .info-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
            text-align: left;
        }

        /* 标签和输入框容器 */
        .form-field {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            max-width: 400px;
        }

        /* 标签样式 */
        .form-label {
            width: 80px;
            font-size: 16px;
            color: #333;
            font-weight: bold;
        }

        /* 输入框样式 */
        .profile-input {
            padding: 8px;
            border-radius: 6px;
            border: 1px solid #ccc;
            width: 100%;
            font-size: 16px;
        }

        /* 通知摘要样式 */
        .notification-panel {
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            max-height: 200px;
            overflow-y: auto;
            text-align: left;
            margin-top: 15px;
        }

        .notification-item {
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
        }

        /* 复选框组样式 */
        .checkbox-group {
            text-align: left;
            margin-bottom: 20px;
        }

        /* 复选框标签样式 */
        .notification-checkbox {
            display: block;
            font-size: 16px;
            color: #333;
            padding: 10px 0;
            transition: color 0.3s ease;
        }

        .notification-checkbox:hover {
            color: #5a3e85;
        }

        /* 保存按钮样式 */
        .save-btn {
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background: linear-gradient(90deg, #7e57c2, #5a3e85);
            border: none;
            border-radius: 6px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(90, 62, 133, 0.3);
            transition: background 0.3s ease;
            margin-top: 10px;
        }

        .save-btn:hover {
            background: linear-gradient(90deg, #6b3faa, #4f297d);
        }

        /* 消息标签样式 */
        .message {
            display: block;
            margin-top: 15px;
            font-size: 14px;
            color: #5a3e85;
        }
        /* 系统状态与通知摘要容器样式 */
       
.status-summary-container {
    width: 60%;
    margin: 20px auto;
    padding: 25px;
    background-color: #f4f2f9;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    text-align: center;
}

/* 标题样式 */
.status-summary-title {
    font-size: 28px;
    color: #5a3e85;
    font-weight: bold;
    margin-bottom: 20px;
}

/* 通知面板样式 */
.status-summary-panel {
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    text-align: left;
}

/* 每条通知项样式 */
.status-summary-item {
    font-size: 16px;
    color: #333;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.status-summary-item:last-child {
      border-bottom: none;
}

/* 通知项悬停效果 */
.status-summary-item:hover {
    background-color: #f4f4f4;
}

/* 新的铃铛图标样式 */
.notification-icon {
    color: #4a90e2; /* 柔和的蓝色 */
    font-size: 18px;
    margin-right: 10px;
}
.notification-timestamp {
    font-size: 14px;
    color: #888;
}


    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     <div class="profile-container">
        <h2 class="profile-title">个人信息完善</h2>
        <asp:Label ID="lblWelcome" runat="server" CssClass="welcome-text" Text="欢迎您, 张三"></asp:Label>

        <!-- 输入框和绑定按钮 -->
        <div class="input-group">
            <asp:TextBox ID="txtOldId" runat="server" CssClass="profile-input" Placeholder="请输入老人ID"></asp:TextBox>
            <asp:Button ID="btnBindOld" runat="server" Text="绑定老人" CssClass="save-btn" OnClick="btnBindOld_Click" />
        </div>

        <!-- 消息标签 -->
        <asp:Label ID="lblMsg" runat="server" CssClass="message"></asp:Label>
    </div>

    <div class="profile-container">
        <h2 class="profile-title">我的账户信息</h2>

        <!-- 显示和编辑用户信息 -->
        <div class="info-group">
            <div class="form-field">
                <asp:Label ID="lblName" Text="姓名" runat="server" CssClass="form-label"></asp:Label>
                <asp:TextBox ID="txtName" runat="server" CssClass="profile-input" Placeholder="姓名" />
            </div>

            <div class="form-field">
                <asp:Label ID="lblPhone" Text="电话" runat="server" CssClass="form-label"></asp:Label>
                <asp:TextBox ID="txtPhone" runat="server" CssClass="profile-input" Placeholder="电话" />
            </div>

            <div class="form-field">
                <asp:Label ID="lblEmail" Text="邮箱" runat="server" CssClass="form-label"></asp:Label>
                <asp:TextBox ID="txtEmail" runat="server" CssClass="profile-input" Placeholder="邮箱" />
            </div>
            <div class="form-field">
                <asp:Label ID="lblPwd" Text="密码" runat="server" CssClass="form-label"></asp:Label>
                <asp:TextBox ID="txtPwd" runat="server" CssClass="profile-input" Placeholder="密码" />
            </div>


            <!-- 保存按钮 -->
            <asp:Button ID="btnSave" runat="server" Text="保存信息" CssClass="save-btn" OnClick="btnSave_Click" />
        </div>

        <!-- 更新消息标签 -->
        <asp:Label ID="lblUpdateMsg" runat="server" CssClass="message"></asp:Label>
    </div>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div class="profile-container">
        <h2 class="profile-title">通知设置</h2>
        <div class="checkbox-group">
            <asp:CheckBox ID="cbHealthAlert" runat="server" Text="接收健康监测异常提醒" CssClass="notification-checkbox" />
            <asp:CheckBox ID="cbBindingRequest" runat="server" Text="接收绑定请求审核通知" CssClass="notification-checkbox" />
            <asp:CheckBox ID="cbSystemUpdates" runat="server" Text="接收系统更新通知" CssClass="notification-checkbox" />
        </div>
        <asp:Button ID="btnSaveNotifications" runat="server" Text="保存通知设置" CssClass="save-btn" OnClick="btnSaveNotifications_Click" />
        <asp:Label ID="lblNotificationMsg" runat="server" CssClass="message"></asp:Label>
    </div>

 <div class="status-summary-container">
    <h2 class="status-summary-title">系统状态与通知摘要</h2>
    <div class="status-summary-panel">
        <asp:Repeater ID="rptNotifications" runat="server">
            <ItemTemplate>
                <div class="status-summary-item">
                    <i class="fas fa-bell notification-icon"></i> <!-- 铃铛图标 -->
                    <span><%# Eval("Message") %></span>
                    <span class="notification-timestamp">- <%# Eval("Timestamp", "{0:yyyy-MM-dd HH:mm}") %></span>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
</div>



</asp:Content>

